<template>
    <a-row>
        <a-col :span="24">
            <a-form :model="formState" v-bind="layout" name="userInfoForm" :validate-messages="validateMessages"
                @finish="onFinish">
                <a-form-item :name="['userInfo', 'userName']" label='姓名' :rules="[{ required: true }]">
                    <a-input v-model:value="formState.userInfo.userName" allowClear placeholder="请填写姓名"/>
                </a-form-item>
                <a-form-item :name="['userInfo', 'password']" label='' :rules="[{ required: true }]">
                    <a-input v-model:value="formState.userInfo.password" allowClear placeholder="请填写"/>
                </a-form-item>
                <a-form-item :name="['userInfo', 'remark']" label='' :rules="[{ required: true }]">
            		<a-textarea v-model:value="formState.userInfo.remark" :auto-size="{ minRows: 2, maxRows: 5 }" allowClear placeholder="请填写"/>
                </a-form-item>
                <a-form-item :wrapper-col="{ ...layout.wrapperCol, offset: 10 }">
                    <a-button type="primary" html-type="submit">确定保存</a-button>
                </a-form-item>
            </a-form>
        </a-col>

    </a-row>
</template>

<script>

import { defineComponent, reactive } from 'vue'
import { Object } from 'vue-types'
import { message } from 'ant-design-vue';

import Mixins from "../utils/Mixins";
import Constants from "../utils/Constants"
export default defineComponent({
    props: {
        userInfo: {
            type: Object,
            required: true
        }
    },
    setup(props, context) {
        
        const that = Mixins().globalProperties

        const formState = reactive({
            userInfo: {
                userName: '',
                password: '',
                remark: '',
                id: "",
            },
        });
        
        formState.userInfo.userName = reactive(props.userInfo.userName || '') ;
        formState.userInfo.password = reactive(props.userInfo.password || '') ;
        formState.userInfo.remark = reactive(props.userInfo.remark || '') ;
        formState.user.id = reactive(props.user.id || "");

        const layout = {
            labelCol: { span: 6 },
            wrapperCol: { span: 12 },
        };

        const validateMessages = {
            required: '${label} is required!',
            types: {
                email: '${label} is not a valid email!',
                number: '${label} is not a valid number!',
            },
            number: {
                range: '${label} must be between ${min} and ${max}',
            },
        };
        

        const onFinish = async (values) => {
            console.log('Success:', values);

            let params = {};
            params.id = formState.userInfo.id;
            params.userName = formState.userInfo.userName;
            params.password = formState.userInfo.password;
            params.remark = formState.userInfo.remark;

            let url = Constants.user_infos_url;
            const res = await that.$http.post(url, params);
            console.log(res);

            if (res.data && res.data.code === '01') {
                message.success("信息保存成功");
                context.emit("close", "ok");
            } else {
                message.success(res.data.message);
            }

        };


        
        return {
            formState,
            layout,
            validateMessages,
            onFinish,


        };

    },
})
</script>
